<template lang="html">
  <div id="index">
    <!-- <video src="videofile.ogg" autoplay poster="posterimage.jpg">

    </video> -->
    <div class="index_bg">
      <img src="../../assets/images/bg.jpg" alt="">
    </div>
    <div :class="{onload: flag}" class='type'>
      <div class="before"></div>
      <div class="after"></div>
      <p>{{ all_text }}</p>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
    export default {
      data() {
        return {
          flag: false,
          all_text: '',
        }
      },
      mounted() {
        this.flag = !this.flag;
        var type_text = '我们的心愿是....世界和平 !';
        var length = type_text.length;
        var index = 0;
        setTimeout(
          () => {
            var cssType = setInterval(() => {
              this.all_text += type_text.charAt(index);
              if(index++ == length) {
                clearInterval(cssType);
                index = 0;
              }
            },300)
          },1000)
      }
    }
</script>

<style lang="scss">
    @import './index.scss';
</style>
